<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>

<script>
    $(function (){
        //异步获取用户信息
        $.ajax({
            url:"/admin/user/getAllUser",
            method:"POST",
            data:null,
            success:function (data){
                let html = "";
                $.each(data, function (index,user){
                    html = html +
                        "<option value='" + user.uid + "'>" + user.userName + "</option>";
                });
                $(".user").html(html);
                <!--遍历列表，获取信息并赋值-->
                $(".userId").each(function() {
                    let spanValue = $(this).find("span").text();
                    $(this).find("select").val(spanValue);
                });
            }
        });

        //异步获取商品信息
        $.ajax({
            url:"/admin/goods/getAllGoods",
            method:"POST",
            data:null,
            success:function (data){
                let html = "";
                $.each(data, function (index,goods){
                    html = html +
                        "<option value='" + goods.gid + "'>" + goods.goodsName + "</option>";
                });
                $(".goods").html(html);
                <!--遍历列表，获取信息并赋值-->
                $(".goodsId").each(function() {
                    let spanValue = $(this).find("span").text();
                    $(this).find("select").val(spanValue);
                });
            }
        });

        //查询按钮点击响应事件
        // $("#select").click(function (){
        //     //获取查询条件，并去除空格
        //     let selectByOid = $.trim($("#selectByOid").val());
        //     let selectByGoodsState = $("#selectByGoodsState").val();
        //     //判断查询条件是否为空
        //     if (selectByOid > 10000 || selectByGoodsState != 4){
        //         //向后端发送数据
        //         $.ajax({
        //             url:"/admin/orders/selectOrders",
        //             method:"POST",
        //             data:{"oid":selectByOid,"ordersState":selectByGoodsState},
        //             success:function (data){
        //                 let html = "";
        //                 $(".tbody").html("");
        //                 $.each(data, function (index,orders){
        //                     html = html +
        //                         "<tr>\n" +
        //                         "<td>" + orders.oid + "</td>" +
        //                         "<td class='userId'>" + orders.uid + "</td>" +
        //                         "<td class='goodsId'>" + orders.gid +"</td>" +
        //                         "<td>" + orders.ordersPrice + "</td>" +
        //                         "<td>" + orders.ordersDate + "</td>" +
        //                         "<td>" + orders.ordersState + "</td>" +
        //                         "<td>\n" +
        //                         "<a href=\"/admin/orders/updataOrders?oid= " + orders.oid + "\">详情</button></a>\n" +
        //                         "</td>\n" +
        //                         "</tr>";
        //                 });
        //                 $("#tbody").html(html);
        //             }
        //         })
        //     }else {
        //         $("#modalText").text("空的查询条件");
        //         $("#myModal").modal('show');
        //     }
        // });

    })
</script>

<!--下拉框样式-->
<style>
    #selectByGoodsState {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        padding: 0 24px 0 8px;
        font-family: inherit;
        cursor: pointer;
        position: relative;
        background: url('') no-repeat right center;
    }
</style>

<body>
<!--头部导航条-->
<th:block th:insert="~{/fixed/headerBar::headBar}"></th:block>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <th:block th:insert="~{/fixed/siedBar::siedBar}"></th:block>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <h2>订单管理</h2>

            <!--查询框-->
<!--            <div class="row">-->
<!--                &lt;!&ndash;条件框1&ndash;&gt;-->
<!--                <div class="col-3">-->
<!--                    <div class="input-group mb-3">-->
<!--                        <div class="input-group-prepend">-->
<!--                            <span class="input-group-text">订单号：</span>-->
<!--                        </div>-->
<!--                        <input id="selectByOid" value="10000" type="number" placeholder="输入查询订单号" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;条件框2&ndash;&gt;-->
<!--                <div class="col-2">-->
<!--                    <div class="input-group mb-3">-->
<!--                        <div class="input-group-prepend">-->
<!--                            <span class="input-group-text">订单状态：</span>-->
<!--                        </div>-->
<!--                        <select id="selectByGoodsState">-->
<!--                            <option value="4">全部</option>-->
<!--                            <option value="0">未支付</option>-->
<!--                            <option value="1">待发货</option>-->
<!--                            <option value="2">已发货</option>-->
<!--                            <option value="3">已收货</option>-->
<!--                        </select>-->
<!--                    </div>-->
<!--                </div>-->

<!--                &lt;!&ndash;按钮组&ndash;&gt;-->
<!--                <div class="col-1">-->
<!--                    <button id="select" class="btn btn-primary">查询</button>-->
<!--                </div>-->
<!--            </div>-->

            <div class="table-responsive" style="height: 710px;margin-top: 62px;">
                <table id="table" style="text-align: center" class="table">
                    <thead class="thead-dark">
                    <tr>
                        <th class="col-1">#</th>
                        <th>所属用户</th>
                        <th>购买商品</th>
                        <th>购买数量</th>
                        <th>总价</th>
                        <th>创建时间</th>
                        <th>订单状态</th>
                        <th class="col-2 .offset-10">详情</th>
                    </tr>
                    </thead>
                    <tbody id="tbody" class="tbody" th:each="pages:${pageAll}">
                    <tr>
                        <td th:text="${pages.oid}"></td>
                        <td class="userId">
                            <span hidden th:text="${pages.uid}"></span>
                            <select class="btn user" th:value="${pages.uid}" style="appearance: none;pointer-events: none;">
                                <option></option>
                            </select>
                        </td>
                        <td class="goodsId">
                            <span hidden th:text="${pages.gid}"></span>
                            <select class="btn goods" th:value="${pages.gid}" style="appearance: none;pointer-events: none;">
                                <option></option>
                            </select>
                        </td>
                        <td th:text="${pages.ordersQuantity}"></td>
                        <td th:text="${pages.ordersPrice} + '元'"></td>
                        <td th:text="${pages.ordersDate}"></td>
                        <td>
                           <span class="alert alert-danger"  th:if="${pages.ordersState} == 0">未支付</span>
                           <span class="alert alert-warning" th:if="${pages.ordersState} == 1">待发货</span>
                           <span class="alert alert-primary" th:if="${pages.ordersState} == 2">已发货</span>
                           <span class="alert alert-success" th:if="${pages.ordersState} == 3">已完成</span>
                        </td>
                        <td>
                            <a th:href="@{/orders/updataOrders(oid = ${pages.oid})}">详情</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!--分页按钮-->
            <div class="col align-self-center">
                <nav class="offset-md-5" aria-label="Page navigation example" th:if="${pageAll.totalPages>1}">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" th:href="@{/orders(page = 0)}">首页</a>
                        </li>
                        <li class="page-item"  th:each="i: ${#numbers.sequence(1, pageAll.totalPages)}">
                            <a class="page-link" th:href="@{/orders(page = ${i - 1})}" th:text="${i}">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" th:href="@{/orders(page = ${pageAll.getTotalPages() - 1})}">尾页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </main>
    </div>
</div>
</body>
</html>